<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="元素ID">
                  <a-input placeholder="请输入元素ID" v-model.trim="queryParam.code"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="元素名称">
                  <a-input placeholder="请输入元素名称" v-model.trim="queryParam.name"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="元素标签">
                  <a-select v-model="queryParam.elementTagId" style="width: 100%" placeholder="请选择元素标签">
                    <a-select-option v-for="(tag,index) in elementTagOptions" :key="tag.id" :value="tag.id">
                      <a-tag class="tag" :color="tag.color">
                        <j-ellipsis :value="tag.name" :length="10" />
                      </a-tag>
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <template v-if="toggleSearchStatus">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="创建人">
                    <j-search-select-user v-model="queryParam.createBy" placeholder="请输入并选择创建人" disabled></j-search-select-user>
                  </a-form-item>
                </a-col>
              </template>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                  <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                  </a>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="table-operator">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        </div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"
          class="j-table-force-nowrap"
          @change="handleTableChange">
          <template slot="elementImageListSlot" slot-scope="text">
            <span v-if="!(text && text.length)" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text[0].imageUrl)" style="width:80px;height: 80px;border-radius: 4px;object-fit: cover;cursor: pointer;" @click="handleImg(text[0].imageUrl)"/>
          </template>
          <template slot="productCountSlot" slot-scope="text, record">
            <button class="productCount-button" @click="handleProductCount(record)">{{ text }}</button>
          </template>
        </a-table>
      </a-form-model>
    </j-form-container>

    <product-library-element-modal ref="modalForm" @ok="modalFormOk"></product-library-element-modal>
  </a-spin>
</template>

<script>
  import Vue from 'vue'
  import { USER_INFO } from '@/store/mutation-types'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import ProductLibraryElementModal from '@/views/productLibrary/modules/ProductLibraryElementModal'
  export default {
    name: 'ProductLibrarySkuElementForm',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      ProductLibraryElementModal
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        elementTagOptions: [],
        queryParam: {
          createBy: Vue.ls.get(USER_INFO).username
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'元素ID',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'元素图',
            align:"center",
            dataIndex: 'elementImageList',
            scopedSlots: { customRender: 'elementImageListSlot' }
          },
          {
            title:'元素名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'元素标签',
            align:"center",
            dataIndex: 'elementTagId_dictText',
          },
          {
            title:'关联产品数量',
            align:"center",
            dataIndex: 'productCount',
            scopedSlots: { customRender: 'productCountSlot' }
          },
          {
            title:'创建人',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime'
          },
        ],
        url: {
          list: '/hzkj-product/product/productLibrary/element/list',
          elementTagList: "/hzkj-product/product/productLibrary/elementTag/list",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getElementTagList();
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        if(!(this.selectionRows && this.selectionRows.length)){
          this.$message.warning('请选择元素!');
          return;
        }
        this.$emit('ok', this.selectionRows)
      },
      handleImg(src){
        if(src){
          this.$viewerApi({images: [src]});
        }
      },
      searchReset(){
        this.queryParam = {
          createBy: Vue.ls.get(USER_INFO).username
        }
        this.loadData(1);
      },
      getElementTagList(){
        getAction(this.url.elementTagList).then((res) => {
          if(res.success){
            this.elementTagOptions = res.result && res.result.records || [];
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      handleProductCount(record){
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = `${record.name} ${record.code} 关联产品列表`;
        this.$refs.modalForm.disableSubmit = true;
      },
    }
  }
</script>

<style scoped>
.productCount-button{
  color: #1890FF;
  cursor: pointer;
  background-color: transparent;
  border: none;
}
</style>